<template>
  <div>
    <el-select v-model='value' multiple collapse-tags placeholder='please select'>
      <div>please choose</div>
      <el-option v-for='item in temp' :key='item.id' :label='item.label' :value='item.value'></el-option>
    </el-select>

    <el-input type='text' style='width:200px' v-model='k' clearable />
    <el-button type='primary' @click='start'>start</el-button>

    <div class='k'>
      <el-radio v-model='radio' label='1'>备选项</el-radio>
      <el-radio v-model='radio' label='2'>备选项</el-radio>
    </div>

    <div class='k'>
      <el-checkbox-group v-model='checkList'>
        <el-checkbox label='复选框 A'></el-checkbox>
        <el-checkbox label='复选框 B'></el-checkbox>
        <el-checkbox label='复选框 C'></el-checkbox>

      </el-checkbox-group>
    </div>

    <div>
      <video muted='muted' class='video' :src='src' type='video/mp4' autoplay='autoplay' controls='controls' loop='-1'>
        <p>你的浏览器不支持video标签.</p>
      </video>

      <video
        id="my-player"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        poster="http://vjs.zencdn.net/v/oceans.png"
        data-setup="{}"
      >
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
        <p class="vjs-no-js">
          如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
          <a href="https://videojs.com/html5-video-support/" target="_blank"
          >HTML5 video</a>
        </p>
      </video>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: '1',
      value: '',
      src: 'http://123.60.161.161:80/gps-web/photos?refPath=2023-05-29/239/131527_02_02_6502_0_11106225621-20230529131527-11273.new.mp4',
      k: ' ',
      temp: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
        { label: 3, value: 3 }
      ],
      checkList: []
    }
  },
  methods: {
    start() {
      console.log(this.k)
    }
  }
}
</script>
<style scoped>

.k {
  display: inline-block;
}
</style>
